* {
  margin: 0;
  padding: 0
}
.case1 {
  width: 100px;
  height: 100px;
  margin-left: 20px;
  box-sizing: border-box;
  border: 4px solid yellow;
  background-color: aqua;
}
.case2 {
  width: 100px;
  height: 100px;
  margin-left: 20px;
  border: 4px solid yellow;
  background-color: skyblue;
}

/* 
  元素显示： display:none;  隐藏元素，且不占据空间
  visibility:visible ;  显示元素，但占据空间，隐藏元素（hidden）
  overflow: auto;  对超出边界的元素，做出自适应的调整   |   :hidden;  超出部分隐藏    |    scroll;  超出部分滚动条
  clear: both;  清除浮动，对紧靠的浮动元素进行清除
*/


.case3 {
  box-sizing: border-box;
  width: 400px;
  height: 200px;
  background-color: gray;
}
.case3 > div {
  float: left;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.case3:after {
  content: '';
  clear: both;
  display: block;
}
.mtd1 {
  background-color: skyblue;
}
.mtd2 {
  background-color: yellow;
  /* relative：相对定位，相对于自身位置进行偏移，但是仍然占据空间 
     absolute：绝对定位，脱离文档流，寻找定位属性，若父元素没有定位属性，则向上祖先寻找，直到body定位
     fixed：固定定位，相对于浏览器窗口进行定位
     sticky：粘性定位，初始状态相当于static定位，
             top\right\bottom\right至少声明一个，不然不起作用
             相对于浏览器窗口进行定位，但会根据滚动条进行变化
  */
}
.mtd3 {
  background-color: hotpink;
}

.case4 {
  width: 400px;
  height: 2000px;
  background-color: blueviolet;
}
.case4 > h1 {
  position: sticky;
  top: 100px;
  color: white;
}

/* 
  calc()：计算函数，可以计算数值，也可以计算百分比
*/